
const gzhStr = '写代码的浩'.split('');
const { pinyin } = pinyinPro;
const gzhPy = pinyin(gzhStr.join(''), { type: 'array' });

console.log(gzhStr.join(''), gzhPy.join(' '));

const containerEl = document.getElementById('gzh');
for(let i = 0, len = gzhPy.length; i < len; i++) {
  const rubyEl = document.createElement('ruby');
  rubyEl.innerHTML = `${gzhStr[i]} <rp>(</rp><rt>${gzhPy[i]}</rt><rp>)</rp>`;
  containerEl.appendChild(rubyEl);
}

///////////////////////////
const inputEl = document.getElementById('input');
const pinyinResEl = document.getElementById('pinyinRes');
let word = ''
inputEl.addEventListener('change', (e) => {
  word = inputEl.value;
  console.log('输入:', word);

  const wordArr = word.split('');
  const wordPy = pinyin(wordArr.join(''), { type: 'array' });

  let rubyStr = '';
  for(let i = 0, len = wordArr.length; i < len; i++) {
    rubyStr += '<ruby>';
    rubyStr += `${wordArr[i]}<rp>(</rp><rt>${wordPy[i]}</rt><rp>)</rp>`;
    rubyStr += '</ruby>';
  }
  
  pinyinResEl.innerHTML = rubyStr;
});


